<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport">
		<title>test1</title>
		<style>
		html {
		  height: 100%;
		}
		body {
		 background-image:url("bg.jpg");
		 backgroud-position:center;
		 background-size: cover;
		 background-attachment: fixed;
		 background-repeat: no-repeat;
		 text-align: center;
		}
		.title{
			background-color:#3f5662;
			height:7% auto; /*高度改为自动高度*/
			font-size:1vmax;
			width:100%;
			margin-left: 0;
			position:fixed;
			opacity:0.6;
			top:0;
			color:white;
			margin-bottom: 1px;
			overflow:hidden;
		}
		
		.title ul{
		            /* 清除ul标签的默认样式 */
		            width: 80%;
		            list-style-type: none;
		            margin: 0;            
		            padding: 0;
		
		        }
				
				 .title li {    
				            float:left; /* 使li内容横向浮动，即横向排列  */
				            margin-right:4vmax;  /* 两个li之间的距离*/
							position:relative;
							top:0.;
							border-color:#ffffff;
							border-radius:8px;
				        }
				
				        .title li a{
				           /* 设置链接内容显示的格式*/
				            display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
				            color:white;
				            text-align: center;
				            padding: 0.5vmax 1vmax;
				            text-decoration: none; /* 去除下划线 */
				        }
				        .title li a:hover{
				            /* 鼠标选中时背景变为深色 */
				            background-color: #1e2536;
							border-radius:0.5vmax;
				        }

		.symbol{
			position:absolute;
			top:1%;
			left:2%;
			font-size: 2vw;
			color:white;
			font-weight: bolder;
			text-shadow: 3px 3px 3px #516f7c;
			font-family:Cursive;
		}

		.box1{
			position:absolute;
			top:18%;
			left:10%;
			height:16%;
			width:26%;
			background-color:#344050;
			opacity:0.5; 
			border-radius:0.7rem;
			box-shadow: 0.5rem 0.9rem 1.2rem rgba(0, 0, 0, 0.25),
				0.3rem 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		}
		
		.box2{
			position:absolute;
			top:44%;
			left:10%;
			height:16%;
			width:26%;
			background-color:#344050;
			opacity:0.5; 
			border-radius:0.7rem;
		box-shadow: 0.5rem 0.9rem 1.2rem rgba(0, 0, 0, 0.25),
			0.3rem 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		}
		
		.box3{
			position:absolute;
			top:70%;
			left:10%;
			height:16%;
			width:26%;
			background-color:#344050;
			opacity:0.6; 
			border-radius:0.7rem;
			box-shadow: 0.5rem 0.9rem 1.2rem rgba(0, 0, 0, 0.25),
				0.3rem 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
		}
		.h1{
			position:absolute;
			left:4%;
			top:0;
			font-size: 2vmax;
			color:white;
			text-shadow: 0.2vmax 0.2vmax 0.2vmax #758481;
		}
		.link1{
			color:#c4f193;
			position:absolute;
			left:78%;
			top:50%;
			font-size: 1.05vmax;
		}
		
		.h2{
			position:absolute;
			left:4%;
			top:0;
			font-size: 2vmax;
			color:white;
			text-shadow: 0.2vmax 0.2vmax 0.2vmax #758481;
		}
		.link2{
			color:#c4f193;
			position:absolute;
			left:78%;
			top:63%;
			font-size: 1.05vmax;
		}
		

		.h3{
			position:absolute;
			left:4%;
			top:0;
			font-size: 2vmax;
			color:white;
			text-shadow: 0.2vmax 0.2vmax 0.2vmax #758481;
		}
		.link3{
			color:#c4f193;
			position:absolute;
			left:78%;
			top:55%;
			font-size: 1.05vmax;
		}
		.picture{
			position:absolute;
			height:76.5%;
			width:30.5%;
			top:14%;
			left:58%;
			background-color:#545f74;
			opacity:0.4;
			border-radius:1.1vmax;
		}

		#p1{
			position:absolute;
			left:59%;
			top:18%;
			width:17%;
			height:24%;
			border-width:0.3vmax;
			border-color:#89a6a7;
			border-style:outset;
		}
		#p2{
			position:absolute;
			left:68.5%;
			top:40%;
			width:18.2%;
			height:22.2%;
			border-width:0.3vmax;
			border-color:#7e8b9a;
			border-style:outset;
		}
		#p3{
			position:absolute;
			width:20%;
			height:25%;
			left:58.5%;
			top:60.5%;
			border-width:0.3vmax;
			border-color:#909fb0;
			border-style:outset;
		}		
		.txt1{
			position:absolute;
			left:77%;
			top:18%;
			height:21.5%;
			width:10.5%;
			background-color:#ffffff;
			opacity:0.15;
			border-radius:0.5vmax;
		}
		#t1{
			position:absolute;
			left:77.5%;
			top:18%;
			height:21.5%;
			width:9.5%;
			text-align:left;
			font-size:0.93vmax;
			font-weight:1px;
			color: #ffffff;
			opacity:0.8;
			overflow: hidden;
		}
		
		footer {
		  width: 100%;
		  color: white;
		  font-size: 1vmax;
		  margin-left: 5px;
		  text-shadow: 1px 1px 1px #737373; 
		  position: absolute;
		  bottom: 0;
		  text-align: center;
		  padding-bottom: 1vmax;
		}
		footer a {
		  color: #FFFFFF;
		}
		
		</style>
	</head>
	<body>	
		<div class="title">
		<center>
		<span class="symbol">KuKi</span>
		<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">信息资源</a></li>
		<li><a href="#">购买</a></li>
		<li><a href="#">技术支持</a></li>
		<li><a href="#">最新资讯</a></li>
		<li><a href="#">账号管理</a></li>
		</ul>
		</div>
		<div class="box1">
		<h1 class="h1">Welcome!</h1>
		<a href="#" class="link1">Select?</a>
		</center>
		</div>
		
		<div class="box2">
		<h1 class="h2">Do you have a number?</h1>
		<a href="#" class="link2">Login?</a>
		</div>
		
		<div class="box3">
		<h1 class="h3">Choose your like</h1>
		<a href="#" class="link3">About?</a>
		</div>
		<div class="picture">
		<!-- 用于设置背景 -->
		</div>
		<img src="fafb94b8d6848555e512ab8e739f78ed.jpg" id="p1"/>
		<div class="txt1">
			</div>
			<div id="t1">
			<p>This is our work place.You can call us to ask some details!We are waiting for your join!</p>
			</div>
		<img src="ed77547c0d1d6ff0055da7b9786fc44e.jpg" id="p3"/>
		
		<img src="681484ea7d38ed22c36f2a655f0b4948.jpg" id="p2"/>
		
		</script>
	</body>
	<footer><a>Created by LULU</a> @2021.
	</footer>
</html>